<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增 {{button_text}}</el-button>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" tab-position="right" v-loading="loading">
      <el-tab-pane name="address" class="app-container">
        <strong slot="label">联系地址</strong>
        <el-table :data="callUsAddressList" max-height="600">
          <el-table-column label="序号" align="center" prop="id" width="55"/>
          <el-table-column label="名称" align="center" prop="name" width="300"/>
          <el-table-column label="详细地址" align="center" prop="info"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="联系经理" name="manager" class="app-container">
        <strong slot="label">联系经理</strong>
        <el-row :gutter="20">
          <el-col :span="8" v-for="manager in callUsManagerList">
            <Card width="100%" height="20vh" border-radius="1rem" class="manager_card">
              <image-preview width="10rem" height="10rem" :src="manager.qrcodeUrl" style="border-radius: 0.5rem"/>
              <div class="manager_option">
                <div class="manager_option_option">
                  <el-button icon="el-icon-edit" type="text" @click="handleUpdate(manager)"></el-button>
                  <el-button icon="el-icon-delete" type="text" @click="handleDelete(manager)"></el-button>
                </div>
                <div class="manager_info">
                  <div>
                    <span class="manager_info-title">姓名：</span>
                    <span class="manager_info-data">{{manager.name}}</span>
                  </div>
                  <div>
                    <span class="manager_info-title">联系电话：</span>
                    <span class="manager_info-data">{{manager.telephone}}</span>
                    <br><span v-show="manager.isWechat" class="manager_info-wechat">(微信同号)</span>
                  </div>
                </div>
                <div class="flex1"></div>
              </div>
            </Card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="联系邮箱" name="email" class="app-container">
        <strong slot="label">联系邮箱</strong>
        <el-table :data="callUsEmailList" max-height="600">
          <el-table-column label="序号" align="center" prop="id" width="55"/>
          <el-table-column label="名称" align="center" prop="name" width="300"/>
          <el-table-column label="邮箱" align="center" prop="email"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-drawer :title="title+' '+button_text" :visible.sync="open" size="40%" append-to-body destroy-on-close :wrapperClosable="false">
      <div style="width: 90%;margin: 0 auto">
        <el-form v-if="activeName === 'address'" label-position="top" ref="form" :model="form" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" style="width: 50%" clearable/>
          </el-form-item>
          <el-form-item label="详细地址" prop="info">
            <el-input type="textarea" :rows="3" v-model="form.info" placeholder="请输入详细地址" style="width: 50%" clearable/>
          </el-form-item>
        </el-form>
        <el-form v-if="activeName === 'manager'" label-position="top" ref="form" :model="form" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" style="width: 50%" clearable/>
          </el-form-item>
          <el-form-item label="电话号码" prop="telephone">
            <el-input v-model="form.telephone" placeholder="请输入电话号码" style="width: 50%" clearable/>
          </el-form-item>
          <el-form-item label="是否微信同号" prop="isWechat">
            <el-radio v-model="form.isWechat" :label="true">是</el-radio>
            <el-radio v-model="form.isWechat" :label="false">否</el-radio>
          </el-form-item>
          <el-form-item label="二维码" prop="qrcodeUrl">
            <ImageUpload :value="form.qrcodeUrl" :limit="1" @input="handleUploadQRCodeUrl"/>
          </el-form-item>
        </el-form>
        <el-form v-if="activeName === 'email'" label-position="top" ref="form" :model="form" :rules="rules">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入名称" style="width: 50%" clearable/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" style="width: 50%" clearable/>
          </el-form-item>
        </el-form>
      </div>

      <div style="width: 100%;text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {getJiayi_about_us_call_us, updateJiayi_about_us} from "@/api/cms/jiayi_about_us";

export default {
  name: "Jiayi_about_us__call_us",
  data() {
    return {
      activeName: 'manager',
      loading: false,
      aboutUsForm: {},
      valueObj: {},
      callUsAddressList: [],
      callUsManagerList: [],
      callUsEmailList: [],
      open: false,
      title: '',
      form: {},
      rules: {
        name: [
          {required: true, message: "名称不能为空", trigger: "blur"},
        ],
        info: [
          {required: true, message: "详细地址不可为空", trigger: "blur"},
        ],
        telephone: [
          {required: true, message: "电话号码不可为空", trigger: "blur"},
          {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的电话号码", trigger: "blur"}
        ],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
      }
    };
  },
  created() {
    this.getCallUs();
  },
  computed:{
    button_text(){
      return this.activeName === 'address' ? '联系地址' : this.activeName === 'manager' ? '联系经理' : '联系邮箱';
    }
  },
  methods: {
    getCallUs(){
      getJiayi_about_us_call_us().then(response=>{
        this.aboutUsForm = response.data;
        this.valueObj = response.data.valueObj;
        this.callUsAddressList = response.data.valueObj.callUsAddressList;
        this.callUsManagerList = response.data.valueObj.callUsManagerList;
        this.callUsEmailList = response.data.valueObj.callUsEmailList;
        this.loading = false
      })
    },
    resetForm() {
      this.form =
        this.activeName === 'address' ?
          {id: null, name: null, info: null} :
        this.activeName === 'manager' ?
          {id: null, name: null, telephone: null, isWechat: false, qrcodeUrl: null}
        :
          {id: null, name: null, email: null};
    },
    handleAdd(){
      this.title = '新增';
      this.resetForm();
      this.open = true;
    },
    handleUpdate(row){
      this.title = '修改';
      this.resetForm();
      this.form = {...row};
      this.open = true;
    },
    handleDelete(row){
      let confirm;
      switch (this.activeName){
        case 'address': confirm = `是否确认删除联系地址【${row.name}】`;break;
        case 'manager': confirm = `是否确认删除联系经理【${row.name}】`;break;
        case 'email': confirm = `是否确认删除联系邮箱【${row.email}】`;break;
      }
      this.$modal.confirm(confirm).then(()=>{
        this.aboutUsForm.valueObj = {order: this.activeName, data: row.id};
        return updateJiayi_about_us(this.aboutUsForm);
      }).then(() => {
        this.getCallUs();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    submitForm(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.aboutUsForm.valueObj = {order: this.activeName, data: this.form};
          updateJiayi_about_us(this.aboutUsForm).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.resetForm();
            this.getCallUs();
            this.open = false;
          });
        }
      });
    },
    cancel(){
      this.open = false;
    },
    handleUploadQRCodeUrl(url){
      this.form.qrcodeUrl = url;
    }
  }
};
</script>
<style scoped>
.manager_card{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.manager_option{
  width: 63%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.manager_option_option{
  width: 100%;
  height: 3vh;
  padding-right: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: end;
}
.manager_info{
  width: 89%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}
.manager_info-title{
  font-size: 1.3rem;
  font-weight: bold;
}
.manager_info-data{
  font-size: 1rem;
}
.manager_info-wechat{
  color: #67C23A;
  font-size: 0.9rem;
  float: right;
}
</style>
